# !/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
===========================
@Time : 2022/8/22 0022 21:52
@Author : 测试开发工程师
@File : 1. Vue基本介绍.py
@Software: PyCharm
============================
"""

"""
Vue 背景介绍
    Angular : google
    React : facebook
    Vue: 尤雨溪   官方文档 - https://cn.vuejs.org/v2/guide/
    

Vue 项目示例
<! DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge' />
        <meta name='viewport' content='width=device-width,initial-scale=1.0' />
        <title>Document</title>
        <script src='https"//cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    </head>
    <body>
        <div id='app'>{{message}}</div>
    </body>
</html>
<script>
    var vm = new Vue({
    el:'#app',
    data: {
        message: 'Hello World!',
    },
    methods: {
    },
}),
</script>



Vue 开发工具:   
    1.Ctrl+K+C（可以同时按住三键，也已分开来按Ctrl+K,Ctrl+C）对选中的代码段进行注释
    Ctrl+K+U（可以同时按住三键，也已分开来按Ctrl+K,Ctrl+U）对选中的代码段取消注释
    VSCode : 下载地址  -  https://code.visualstudio.com/Download
    VSCode 推荐插件：
        JavaScript(ES6) code snippets : 包含 ES6 语法中的 JS  代码段
        Vetur : VSCode 支持 VUE 的工具
        Auto Close Tag : 自动添加 HTML/XML 结束标签
        Auto Rename Tag : 自动重命名对应的 HTML/XML 标签
        Highlight Matching Tag : 突出显示匹配的开始和结束标签
        open in browser : 预览 html 文件
 
       
HTML 基本结构  ： 前端三大件  ： html   JavaScript   CSS
    文档声明： <!DOCTYPE html>
    文档主体：<html lang='en'></html>
        文档配置： <head></head>
            设置网页编码格式：<meta charset='UTF-8'/>
            设置网页标题： <title>Document</title>
            导入 JavaScript 文件： <script src='https"//cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
        正文内容： <body></body>
    JavaScript脚本： <script></script>
    CSS 样式表： <style></style>
    

HTML 常用标签
    基本格式： <标签名 属性1='属性值1' 属性2='属性值2'></标签名>
    标签常见形式：
        双标签： <标签名称></标签名称>
        单标签： <标签名/>
        
    HTML 标签常用属性
        常见全局属性
            id : 规定元素的唯一id
            class : 规定元素的类名
            style: 规定元素的行内样式
        常见其他属性
            click : 全局事件属性，当单击鼠标运行脚本
            src: 规定图像的 URL
            herf : 规定链接的目标 URL
            
        HTML 常用标签
            注释标签： < !-- 注释内容 -->
            标题标签： <h1></h1> ... <h6></h6> 字号由大到小
            段落标签： <p></p>
            容器标签： <div></div>| <span></span>     <div id='app' class='content'>内容块</div>
            图像标签： <img />   <img src="https://ceshiren.com/uploads/default/original/1X/809c63f904a37bc0c6f029bbaf4903c2703ea8a.png" />
            超链接标签： <a></a>    <a herf='https://ceshiren.com/'>测试人社区</a>   
            表单标签： <input>   type='number'：数字域    type='text': 文本域   <br> 代表回行    
            <div>
                请输入 id<input type='number' name='id'><br>
                请输入 姓名<input type='text' name='fullname'><br>
                请输入 密码<input type='password' name='pwd'><br>
                你的性别:<input type='radio' name='sex' value='male'>男<br>
                <input type='radio' name='sex' value='female'>女<br>
                <input type='submit value='提交''
            </div>
            
        HTML 其他常用标签
            列表标签
                无序列表：<ul></ul>
                有序列表: <ol></ol>
            表格标签：
                表格：<table></table>
                行： <tr></tr>
                单元格：<td></td>
            文本域标签: <textarea></textarea>
                    
            
    

"""
